<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>auto-binding test</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body unresolved>
    <div>top</div>

    <template id="one" is="auto-binding">
      <h2 id="h" on-tap="{{eventAction}}">{{greeting}}</h2>
    </template>

    <template id="two" is="auto-binding">
      <div>Say something: <input value="{{value}}"></div>
      <div>You said: {{value}}</div>
    </template>

    <div>bottom</div>

    <script>
      var template = document.getElementById('one');
      
      template.greeting = 'Hi';
      
      template.eventAction = function(e) {
        e.handled = true;
      }

      template.test = function() {
        var h = this.$.h;
        chai.assert.equal(h.textContent, this.greeting, 'binding applied');
        var e = this.fire('tap', {}, h);
        chai.assert.isTrue(e.handled, 'element event handler fired');
      }

      var events = 0;

      addEventListener('template-bound', function(e) {
        events++;
        if (e.target.id === 'one') {
          e.target.test();
        }

        if (events === 3) {
          done();
        }

      });

      // test dynamic creation
      addEventListener('polymer-ready', function() {
        var d = document.createElement('div');
        d.innerHTML ='<template is="auto-binding">Dynamical <input value="{{value}}"><div>{{value}}</div></template>';
        document.body.appendChild(d);
      });

    </script>

  </body>
</html>
